<template>
    <view>
        <!--标题和返回-->
		<cu-custom :bgColor="NavBarColor" isBack :backRouterName="backRouteName">
			<block slot="backText">返回</block>
			<block slot="content">维护订单</block>
		</cu-custom>
		 <!--表单区域-->
		<view>
			<form>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title">客户名称<text class="required-star">*</text></view>
                  <input  placeholder="请输入客户名称" v-model="model.customerName"/>
                </view>
              </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title">联系人<text class="required-star">*</text></view>
                  <input  placeholder="请输入联系人" v-model="model.contacts"/>
                </view>
              </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title">联系电话<text class="required-star">*</text></view>
                  <input  placeholder="请输入联系电话" v-model="model.telephone"/>
                </view>
              </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title">上门地址<text class="required-star">*</text></view>
                  <input  placeholder="请输入上门地址" v-model="model.homeAddress"/>
                </view>
              </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title">详细地址</view>
                  <input  placeholder="请输入详细地址" v-model="model.address"/>
                </view>
              </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title">车牌号<text class="required-star">*</text></view>
                  <input  placeholder="请输入车牌号" v-model="model.licensePlate"/>
                </view>
              </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title">工单描述<text class="required-star">*</text></view>
                  <input  placeholder="请输入工单描述" v-model="model.description"/>
                </view>
              </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title">服务时间<text class="required-star">*</text></view>
                  <my-date label="" v-model="model.serviceTime" placeholder="请选择服务时间"></my-date>
                </view>
              </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title"><text space="ensp">服务人员</text></view>
                  <input  placeholder="请输入服务人员" v-model="model.serviceStaff"/>
                </view>
              </view>
			  <view class="cu-form-group">
			  <view class="flex align-center">
				<view class="title">公司名称/个人<text class="required-star">*</text></view>
				<input  placeholder="请输入公司名称/个人" v-model="model.companyNameIndividual"/>
			  </view>
			</view>
			<view class="cu-form-group">
			  <view class="flex align-center">
				<view class="title">故障类型<text class="required-star">*</text></view>
				<!-- <input  placeholder="请输入故障类型" v-model="model.faultType"/> -->
				<checkbox-group v-model="model.faultType">
					<label class="radio-container" v-for="(item, index) in faultType" :key="index">
						<checkbox :value="item.value" :checked="item.checked">{{ item.name }}</checkbox>
					</label>
				</checkbox-group>
			  </view>
			</view>
			<view class="cu-form-group">
				<view class="title"><text space="ensp">图片描述</text></view>
				<!-- <input  placeholder="请输入图片描述" v-model="model.pictureDescription"/> -->
			  <view class="grid col-4 grid-square flex-sub">
			  	<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
			  	 <image :src="imgList[index]" mode="aspectFill"></image>
			  		<view class="cu-tag bg-red radius" @tap.stop="DelImg" :data-index="index">
			  			<text class='cuIcon-close'></text>
			  		</view>
			  	</view>
			  	<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
			  		<text class='cuIcon-cameraadd'></text>
			  	</view>
			  </view>
			</view>
			<view class="cu-form-group">
				<view class="title"><text space="ensp">视频描述</text></view>
				<!-- <input  placeholder="请输入视频描述" v-model="model.videoDescription"/> -->
			  <view class="grid col-4 grid-square flex-sub">
			  	<view class="bg-img" v-for="(item,index) in afterImgList" :key="index" @tap="afterViewImage" :data-url="afterImgList[index]">
			  	 <image :src="afterImgList[index]" mode="aspectFill"></image>
			  		<view class="cu-tag bg-red radius" @tap.stop="afterDelImg" :data-index="index">
			  			<text class='cuIcon-close'></text>
			  		</view>
			  	</view>
			  	<view class="solids" @tap="afterChooseImage" v-if="afterImgList.length<1">
			  		<text class='cuIcon-cameraadd'></text>
			  	</view>
			  </view>
			</view>
			<view class="cu-form-group">
				<view class="title"><text space="ensp">批量报修</text></view>
				<!-- <input  placeholder="请输入批量报修" v-model="model.batchRepairReporting"/> -->
			  <view class="grid col-4 grid-square flex-sub">
			  	<view class="bg-img" v-for="(item,index) in afterImgList" :key="index" @tap="afterViewImage" :data-url="afterImgList[index]">
			  	 <image :src="afterImgList[index]" mode="aspectFill"></image>
			  		<view class="cu-tag bg-red radius" @tap.stop="afterDelImg" :data-index="index">
			  			<text class='cuIcon-close'></text>
			  		</view>
			  	</view>
			  	<view class="solids" @tap="afterChooseImage" v-if="afterImgList.length<1">
			  		<text class='cuIcon-cameraadd'></text>
			  	</view>
			  </view>
			</view>
				<view class="padding">
					<button class="cu-btn block bg-blue margin-tb-sm lg" @click="onSubmit">
						<text v-if="loading" class="cuIcon-loading2 cuIconfont-spin"></text>提交
					</button>
				</view>
			</form>
		</view>
    </view>
</template>

<script>
    import myDate from '@/components/my-componets/my-date.vue'

    export default {
        name: "WorkOrderForm",
        components:{ myDate },
        props:{
          formData:{
              type:Object,
              default:()=>{},
              required:false
          }
        },
        data(){
            return {
				CustomBar: this.CustomBar,
				NavBarColor: this.NavBarColor,
				loading:false,
                model: {
					workOrderType:2,
				},
                backRouteName:'index',
                url: {
                  queryById: "/work/workOrder/queryById",
                  add: "/work/workOrder/add",
                  edit: "/work/workOrder/edit",
                },
				imgList: [],
				afterImgList: [],
				myFormData:{
					beforeMaintenance:'',
					afterMaintenance:'',
					realname:'',
					username:'',
					sex:1,
					birthday:'',
					orgCode:'',
					workNo:'',
					phone:'',
					email:'',
					id:'',
					attendanceRecordList:[],
				},
				faultType: [
					{ name: '视频无法回放', value: '1', checked: false },
					{ name: '系统故障', value: '2', checked: false },
					{ name: '设备误报', value: '3', checked: false },
					{ name: '无法排班', value: '4', checked: false },
					{ name: '无法报站', value: '5', checked: false },
					{ name: '显示屏故障', value: '6', checked: false },
					{ name: '硬盘故障', value: '7', checked: false },
					{ name: '不读司机信息', value: '8', checked: false },
					{ name: '报警无附件', value: '9', checked: false },
					{ name: '无法对讲', value: '10', checked: false },
					{ name: '摄像头故障', value: '11', checked: false },
					{ name: '超速无报警', value: '12', checked: false },
					{ name: '定位漂移', value: '13', checked: false },
					{ name: '无法定位', value: '14', checked: false },
					{ name: '车辆离线', value: '15', checked: false },
				],
            }
        },
        created(){
             this.initFormData();
        },
        methods:{
           initFormData(){
               if(this.formData){
                    let dataId = this.formData.dataId;
                    this.$http.get(this.url.queryById,{params:{id:dataId}}).then((res)=>{
                        if(res.data.success){
                            console.log("表单数据",res);
                            this.model = res.data.result;
                        }
                    })
                }
            },
            onSubmit() {
                let myForm = {...this.model};
                this.loading = true;
                let url = myForm.id?this.url.edit:this.url.add;
				console.log('myForm',myForm)
				this.$http.post2(url,myForm).then(res=>{
				   console.log("res",res)
				   this.loading = false
				   this.$Router.push({name:this.backRouteName})
				}).catch(()=>{
					this.loading = false
				});
            }
        }
    }
</script>
<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	.radio-container {
	  /* display: block; 
	  margin-bottom: 5px;
	  margin-right: 12px;*/
	  line-height: 30px;
	}
	uni-radio-group {
	    display: inline-block;
	    width: 75%;
	}
	uni-checkbox-group {
	    display: inline-block;
	    width: 75%;
	}
	uni-switch, uni-checkbox, uni-radio {
	    position: relative;
	    width: 50%;
	}
	.required-star {
	    color: red;
	    margin-right: 5px;
	  }
</style>